<script setup name="AttachmentSelectorDialog">
import AttachmentUpload from '/@/components/attachmentSelector/AttachmentUpload.vue';
import AttachmentSelector from '/@/components/attachmentSelector/AttachmentSelector.vue';

const videoUploadRef = ref();
const emit = defineEmits(['submit', 'update:modelValue']);

// expects props options
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: () => {
			return false;
		},
	},
	maxLength: {
		type: Number,
		default: 100,
	},
});

let isAdd = ref(false);
let selectList = ref([]);

function _setAddState(state) {
	isAdd.value = state;
}

function beforeClose(done) {
	close();
}

function _checkFun(list) {
	selectList.value = list;
}

function close() {
	emit('update:modelValue', false);
}

function submit() {
	let list = selectList.value;
	emit('submit', list);
	close();
}
</script>

<template>
	<div class>
		<el-dialog
			v-model="modelValue"
			title="选择附件"
			width="1000px"
			:destroy-on-close="true"
			:append-to-body="true"
			:before-close="beforeClose"
			:z-index="4000"
		>
			<div class="selector-box" v-if="!isAdd">
				<AttachmentSelector ref="videoUploadRef" @setAddState="_setAddState" @checkFun="_checkFun" :maxLength="maxLength" />
			</div>
			<div class="upload-box" v-else>
				<AttachmentUpload />
			</div>
			<template #footer>
				<span class="dialog-footer" v-if="!isAdd">
					<el-button @click="close">取消</el-button>
					<el-button type="primary" @click="submit">确定</el-button>
				</span>
				<span class="dialog-footer" v-else>
					<el-button type="primary" @click="isAdd = false">返回选择附件界面</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped></style>
